<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI Card Example</title>
	<style>
		.container{
			width: 500px;
			height: 800px;
			margin: 0 auto;
			border-radius: 12px;
			border: 1px solid #ddd;
		}
		.ai-card {
			width: 300px; /* 卡片宽度 */
			padding: 20px; /* 内边距 */
			border-radius: 10px; /* 圆角 */
			background-color: #f5f5f5; /* 背景色 */
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
			margin-bottom: 20px; /* 卡片间距 */
		}
		
		#typing-text {
			font-family: 'Arial', sans-serif;
			font-size: 18px;
			line-height: 1.5;
			margin-top: 20px;
			/*opacity: 0;*/
			animation: typing 5s steps(20) 1s 1 normal none, blink-caret .5s steps(1) infinite;
		}
		
		#pause-btn, #next-btn {
			display: block;
			margin: 10px auto;
			padding: 5px 10px;
			font-size: 16px;
		}
		
		@keyframes typing {
			from { width: 0; }
			to { width: 100%; }
		}
		
		@keyframes blink-caret {
			from, to { border-color: transparent; }
			50% { border-color: #000; }
		}
	</style>
</head>
<body>
<div class="container">
	<div class="ai-card">
		<p id="typing-text"></p>
	</div>
	<button id="pause-btn">暂停</button>
	<button id="next-btn">下一条</button>
</div>
<script>
	let typingText = document.getElementById('typing-text');
	let pauseBtn = document.getElementById('pause-btn');
	let nextBtn = document.getElementById('next-btn');
	let textArray = [
		'这是第一条AI打字的效果。',
		'这是第二条AI打字的效果。',
		'这是第三条AI打字的效果。'
	];
	let currentIndex = 0;
	let typingSpeed = 100; // 打字速度，单位毫秒
	let intervalId;
	let isPaused = false;
	
	function startTyping() {
		if (!isPaused) {
			let text = textArray[currentIndex];
			let index = 0;
			intervalId = setInterval(function() {
				if (index < text.length) {
					typingText.innerText += text.charAt(index);
					index++;
				} else {
					clearInterval(intervalId);
				}
			}, typingSpeed);
		}
	}
	
	function pauseTyping() {
		isPaused = true;
		clearInterval(intervalId);
	}
	
	function resumeTyping() {
		isPaused = false;
		startTyping();
	}
	
	function nextText() {
		currentIndex = (currentIndex + 1) % textArray.length;
		typingText.innerText = '';
		startTyping();
	}
	
	// 初始开始打字
	startTyping();
	
	// 绑定按钮事件
	pauseBtn.addEventListener('click', pauseTyping);
	nextBtn.addEventListener('click', nextText);
</script>
</body>
</html>